<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="thep" onclick="clickP">click me</p>

    <script>
        const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]
        const theFun = () => {
            const pClick = document.querySelector('.thep')
            pClick.style.color = 'pink'
            pClick.style.fontSize = '30px'
        }

        // Aver 替换 %s
        console.log('hi,my name is %s','Aver');

        // %c表示要控制输出文本的样式
        console.log('%c styled texts', 'font-size: 30px; color:pink');

        // 输出警告信息
        console.warn('warning msg!');

        // 输出报错信息
        console.error('error msg!!!');

        // 输出 info
        console.log('info');

        // testing 断言 当下方值为false时 输出
        console.assert(1===1,'That is wrong')

        // clearing 清空控制台输出的东西
        console.clear();

        // Viewing DOM Element console.dir---直接打印元素
        // console.dir('p')

        // Grouping together 当打印的东西太多了 可以使用分组
        dogs.forEach(dog=>{
            // 按名字分组
            console.groupCollapsed(`${dog.name}`)
            // console.group(`${dog.name}`)
            console.log(`${dog.name}`);
            console.log(`${dog.name} is ${dog.age} years old`);
            console.log(`${dog.name} is ${dog.age * 4} years old`);
            console.groupEnd(`${dog.name}`)
        })

        // 对同一元素计数
        console.count(1)
        console.count(1)
        console.count(1)
        console.count(3)

        // timing 获取某个函数调用时间
        console.time('fetching data')
        let i = 0
        while (i<10) {
            i++
        }
        console.timeEnd('fetching data')

        // table
        console.table(dogs)





    </script>
</body>

</html>